<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<main class="rel">
			<video src="#" muted></video>
			<p class="abs">
				<span class="bigger" id="start">3</span><span class="bigger">/</span>
				<span class="bigger" id="total">8</span>
				<span id="name">Course1</span>
			</p>
		</main>
		<footer class="dpflex">
			<span class="iconfont icon-front"></span>
			<span class="iconfont icon-pausen"> </span>
			<span class="iconfont icon-next"></span>
		</footer>
		<div id="process"></div>
		<div class="rel" id="mask">
			<p id="word">Take a break and then Keep going</p>
			<div id="continue" class="abs dpflex abs">
				<span class="iconfont icon-continue2"></span>
				<span class="iconfont icon-over"></span>
			</div>
			<div id="course" class="dpflex abs">
				<p class="flex1"><img src="#" alt="" id="img" /></p>
				<p class="flex1">
					<span>Current：</span
					><span class="bigger" id="courseName">course1</span>
				</p>
			</div>
		</div>
	</body>
</html>
